import React, { useState, useEffect } from 'react'
import { Input, QRCode, Button, Divider, Space } from 'antd'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment, incrementAsync } from './homeSlice.tsx'

export default function Home() {
  const [text, setText] = useState('https://heqihang.github.io/vue-demo')
  const count = useSelector(state => state.home.value)
  const dispatch = useDispatch()

  useEffect(() => {
    localStorage.setItem('count', count)
  }, [count])

  return (
    <>
      <Space>
        <Button type="primary" onClick={() => dispatch(increment())}>加1</Button>
        <Button type="primary" onClick={() => dispatch(decrement())}>减1</Button>
        <Button type="primary" onClick={() => dispatch(incrementAsync(1))}>异步加1</Button>
      </Space>
      <Divider dashed style={{ borderColor: 'green' }}></Divider>
      <h3 className="text-2xl font-bold text-green-700">当前数字为 {count}</h3>
      <Divider dashed style={{ borderColor: 'skyblue' }}></Divider>
      <Space direction="vertical" align="center">
        <QRCode value={text || '-'} />
        <Input
          placeholder="-"
          value={text}
          onChange={(e) => setText(e.target.value)}
          style={{ width: '260px' }}
        />
      </Space>
    </>
  )
}
